<!--
 * @Author: Freude Xu
 * @Date: 2021-09-17 14:07:03
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:22:20
 * @Description: 头部组件封装
-->
<template>
    <div>
        <!-- 头部 -->
        <!-- {{item}} -->
        <div class="header">
            <div class="header_top">
                <!-- 容器居中 -->
                <div class="wrapper">
                    <div class="left">江西理工大学欢迎您！</div>
                    <div class="right">
                        学校主页
                        <input type="text" class="search" placeholder="请输入关键词" >

                    </div>
                </div>
            </div>
            <div class="header_main">
                <div class="wrapper">
                    <!-- logo的一栏 -->
                    <div class="logo" @click="toHome">
                        <img src="../assets/resource/img/logo.jpg" alt="学校logo" />
                    </div>
                    <ul>
                        <!-- 三目运算符表示当路由query的name与header的栏目头部的name是一致的则将其变化样式 -->
                        <li :class='$route.query.name===item.name?"current":""' v-for="item in category" @click="toJump(item)" :key="item.id">{{item.name}}</li>
                        <!-- <li>学术成果</li> -->
                        <!-- 默认选中项的设置 -->
                        <!-- <li class="current">学校要闻</li>
                <li>学校公告</li> -->
                    </ul>
                </div>
            </div>
        </div>
        <!-- /头部 -->
    </div>
</template>

<script>
    import {
        get
    } from '../utils/request'
    export default {
        data() {
            return {
                category: {}
            }
        },
        created() {
            this.loadCategory()
        },
        // 方法 事件处理程序
        methods: {
            //跳转回主页
            toHome(){
                this.$router.push({
                    path:'/home'
                })
            },
            //跳转
            toJump(item) {
                // JSON.stringify(item);
                    //跳转list页面 编程式路由器导航
                    this.$router.push({
                        //放跳转的路径 和携带的参数
                        path: '/list',
                        // name: 'List',
                        //携带item进行跳转
                        query: item
                    })
            },
            // 所有路径都要写在方法中
            loadCategory() {
                let url = '/index/category/findAll'
                get(url).then(res => {
                    this.category = res.data;
                })
            }
        }
    }
</script>

<style lang="scss">
    //头部样式
    .header {
        .header_top {
            background-color: #8f000b;
            color: white;

            // 表示当前的父元素&
            &>.wrapper::after {
                display: block;
                content: "";
                clear: both;
            }

            .left,
            .right {
                line-height: 3em;
            }

            .left {
                float: left;
            }

            .right {
                float: right;

                .search {
                    margin-left: 8px;
                    background-color: #8f000b;
                    height: 20px;
                    border: 1px solid white;
                    border-radius: 20px;
                    outline: none;
                    padding-left:12px;
                    color: white;
                }
            }
        }

        .header_main {
            padding: 1.5em 0 1.5em 0;
            background-color: #f0f0f0;
            &>.wrapper {
                display: flex;
                justify-content: space-between;
                position: relative;

                ul {
                    position: absolute;
                    bottom: 0;
                    right: 0;

                    // vertical-align: middle;
                    &>li {
                        float: left;
                        padding: 0.8em;
                    }

                    li:hover {
                        // background-color: #028b39;
                        // color: #f3b702;
                        cursor: pointer;
                    }
                    li.current{
                        background-color: #8f000b;
                        color: #f3b702;
                        cursor: pointer;
                    }
                }
            }

            .logo {
                img {
                    height: 60px;
                }
            }
        }
    }
</style>